<template>
    <div>
         <h1>Vue组件基本属性</h1>
    <p>{{ str }}</p>
    <p>{{ num }}</p>
    <p>{{ isBool }}</p>
    <p>{{ arr }}</p>
    <p>{{ arr[0] }}</p>
    <p>{{ obj }}</p>
    <p>{{ obj.b }}</p>
    <p>{{ title }}</p>
    <h1>methods</h1>
    <button @click="btnAction">点击按钮领奖</button>
    
    <button @click="addHandle">点击</button>
    <button @click="minHandle">点击减1</button>
  
    </div>
   
</template>

<script>
export default{
    props:{
        title:""
    },
data(){
    return{
        str:"",
        num:1,
        isBool:true,
        arr:[1,2,3],
        obj:{
            a:1,
            b:2
        }
        
    }
},
computed:{
    num2(){
        return this.num+1
    }
},
watch:{
num:(newVal,oldVal)=>{
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
}
},
methods:{
            btnAction(){
                console.log('夜曲一响上台领奖')
                console.log(this.num)
                this.test()
            },
            test(){
                console.log("test methods")
            },
            addHandle(){
                this.num +=1
            },
            minHandle(){
                this.num -=1
            },
        }
}
</script>